card and mcp updates by rezrah · Pull Request #1444 · primer/brand

rezrah · 2026-08-14T10:03:30Z

Summary

Towards https://github.com/github/brand-experience/issues/248

Updates card and gridline MCP tool guidance as agents are frequently implementing them wrong.

Also adds a pointer to Agent.md file in the primer_brand_setup tool for better docs reading experience.

List of notable changes:

updates guidance for gridlines to be more explicit
removed skew card effect, which is orphaned and no longer used. This is a breaking change, but a reasonable one now.

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

N/A

changeset-bot · 2026-08-14T10:03:34Z

🦋 Changeset detected

Latest commit: e6c5244

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@primer/brand-mcp	Minor
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-08-14T10:05:13Z

🟢 No design token changes found

github-actions · 2026-08-14T10:06:41Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 1 improved, 0 decreased

Component/Hook	Statements	Functions	Branches	Change
`IDE`	~~91.2%~~ 91.6%	97.4%	~~82.8%~~ 83.4%	+0.7%

github-actions · 2026-08-14T10:07:10Z

🟢 Bundle size report

Check	Main	Branch	Change
UMD — full bundle (JS)	102.83 kB	102.32 kB	✅ -521 B (-0.5%)
UMD — full bundle (CSS)	68.11 kB	67.94 kB	✅ -177 B (-0.3%)
ESM — full bundle (JS + CSS)	1.60 MB	1.59 MB	✅ -7.43 kB (-0.5%)
ESM — tree-shaken simple (Button)	71.35 kB	71.22 kB	✅ -127 B (-0.2%)
ESM — tree-shaken complex (ActionMenu)	80.26 kB	80.13 kB	✅ -127 B (-0.2%)

Copilot

Pull request overview

This PR removes obsolete Card APIs/visual effects in @primer/react-brand and updates the Brand MCP guidance + review rules to better enforce page-width gridline framing and calmer typography defaults in component-owned text.

Changes:

Removed Card.disableAnimation and the retired CardSkewEffect, updating stories, tests, CSS, docs, and visual snapshots accordingly.
Updated MCP “page design” + “examples” tool text to emphasize page-width outer frames for horizontal gridlines, and adjusted catalog generation to prefer focused “Gridline” stories.
Added a new primer_brand_review rule warning on unnecessary size overrides for component-owned text (e.g. Card.Heading size=...).

Show a summary per file

File	Description
packages/react/src/Statistic/Statistic.examples.stories.tsx	Removes `disableAnimation` usage from a Card example.
packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.examples.stories.tsx	Conditionally disables `backgroundVisual` when `NODE_ENV === 'test'`.
packages/react/src/river/RiverBreakout/RiverBreakout.features.stories.tsx	Removes `disableAnimation` usage from a Card example.
packages/react/src/Card/index.ts	Stops exporting `CardSkewEffect`.
packages/react/src/Card/CardSkewEffect.tsx	Removes the `CardSkewEffect` implementation.
packages/react/src/Card/Card.visual.spec.ts-snapshots/Visual-Comparison-Card-Card-Arrow-CTA-with-long-label-focus-1-darwin.png	Updates visual snapshot artifact for Card focus state.
packages/react/src/Card/Card.visual.spec.ts	Renames the visual test title for the focus story (no longer “animation disabled”).
packages/react/src/Card/Card.tsx	Removes `disableAnimation` prop support and the corresponding class toggle.
packages/react/src/Card/Card.test.tsx	Removes unit tests asserting `Card--disableAnimation` behavior.
packages/react/src/Card/Card.stories.tsx	Removes `disableAnimation` control from Storybook Playground.
packages/react/src/Card/Card.module.css.d.ts	Removes typings for deleted CSS module class names.
packages/react/src/Card/Card.module.css	Removes `Card--disableAnimation` and `Card--skew` styles.
packages/react/src/Card/Card.features.stories.tsx	Removes `disableAnimation` story plumbing and related play assertions/content.
packages/mcp/src/tools/primer-brand-page-design/primer-brand-page-design.ts	Updates tool description to stress page-width gridline framing.
packages/mcp/src/tools/primer-brand-page-design/primer-brand-page-design.test.ts	Updates expectations to match new page-design guidance content.
packages/mcp/src/tools/primer-brand-examples/primer-brand-examples.ts	Updates tool description to preserve page-width outer frames.
packages/mcp/src/tools/primer-brand-examples/primer-brand-examples.test.ts	Adds assertion for updated description text.
packages/mcp/src/review/rules.ts	Adds `component-text-default-size` review rule.
packages/mcp/src/review/rules.test.ts	Adds tests for the new rule + catalog example expectations.
packages/mcp/scripts/generate-catalog.mjs	Prefers an exact `Gridline` story when selecting canonical examples.
packages/mcp/content/page-design.md	Expands/clarifies gridline framing guidance + typography sizing guidance.
apps/storybook/static/locales/pt-BR/Card.json	Removes `disable_animation_label` string.
apps/storybook/static/locales/ja/Card.json	Removes `disable_animation_label` string.
apps/storybook/static/locales/fr/Card.json	Removes `disable_animation_label` string.
apps/storybook/static/locales/es/Card.json	Removes `disable_animation_label` string.
apps/storybook/static/locales/en/Card.json	Removes `disable_animation_label` string.
apps/storybook/static/locales/de/Card.json	Removes `disable_animation_label` string.
apps/next-docs/content/components/Card/react.mdx	Removes `disableAnimation` documentation and prop-table entry.
.changeset/remove-card-skew-effect.md	Announces `CardSkewEffect` removal (`@primer/react-brand` minor).
.changeset/remove-card-animation-prop.md	Announces `disableAnimation` removal (`@primer/react-brand` minor).
.changeset/connect-gridlines-to-page-edges.md	Announces MCP gridline guidance updates (`@primer/brand-mcp` patch).
.changeset/calm-component-text-sizes.md	Announces MCP typography guidance + review rule (`@primer/brand-mcp` patch).

Review details

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Files reviewed: 30/36 changed files
Comments generated: 1
Review effort level: Lite

github-actions · 2026-08-14T10:10:48Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

Copilot

Review details

Files reviewed: 36/47 changed files
Comments generated: 3
Review effort level: Balanced

card and mcp updates

2d17cba

Copilot AI lite review requested due to automatic review settings August 14, 2026 10:03

rezrah requested a review from a team as a code owner August 14, 2026 10:03

Copilot started reviewing on behalf of rezrah August 14, 2026 10:04 View session

rezrah temporarily deployed to github-pages August 14, 2026 10:07 — with GitHub Actions Inactive

Copilot AI reviewed Aug 14, 2026

View reviewed changes

Comment thread packages/mcp/src/review/rules.ts

restore disableAnimation prop

0354343

rezrah temporarily deployed to github-pages August 14, 2026 15:23 — with GitHub Actions Inactive

fix docs

1a1616c

rezrah temporarily deployed to github-pages August 14, 2026 17:27 — with GitHub Actions Inactive

fix vrt, update primer_brand_setup and reorg folders

e23bff7

rezrah temporarily deployed to github-pages August 16, 2026 16:31 — with GitHub Actions Inactive

rezrah requested a balanced review from Copilot August 16, 2026 16:36

Copilot started reviewing on behalf of rezrah August 16, 2026 16:36 View session

Copilot AI reviewed Aug 16, 2026

View reviewed changes

Comment thread packages/mcp/src/brand/resolve-brand-project/resolve-brand-project.ts Outdated

Comment thread packages/mcp/src/brand/update-agents-md/update-agents-md.ts

Comment thread packages/mcp/src/review/rules.ts Outdated

address second round feedbac

e6c5244

rezrah deployed to github-pages August 16, 2026 16:55 — with GitHub Actions View deployment

rezrah merged commit e61d466 into main Aug 16, 2026
17 checks passed

rezrah deleted the rezrah/mcp-guidance-default-sizing branch August 16, 2026 18:52

primer Bot mentioned this pull request Aug 16, 2026

Release tracking #1446

Open

Navigation Menu

Uh oh!

card and mcp updates - #1444

card and mcp updates#1444
rezrah merged 5 commits into
mainfrom
rezrah/mcp-guidance-default-sizing

rezrah commented Aug 14, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Aug 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 14, 2026

Uh oh!

github-actions Bot commented Aug 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 14, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rezrah commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot Bot commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Aug 14, 2026

🟢 No design token changes found

Uh oh!

github-actions Bot commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

github-actions Bot commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Bundle size report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

github-actions Bot commented Aug 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rezrah commented Aug 14, 2026 •

edited

Loading

changeset-bot Bot commented Aug 14, 2026 •

edited

Loading

github-actions Bot commented Aug 14, 2026 •

edited

Loading

github-actions Bot commented Aug 14, 2026 •

edited

Loading

github-actions Bot commented Aug 14, 2026 •

edited

Loading